<template>
  <div class="houseMembers">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">房屋成员</span>
      <span class="header-wrap-right">
      </span>
    </div>
    <div class="listContent">
      <ul class="list-Box">
        <li>{{memberData.residential_text}}</li>
        <li>{{memberData.period}}-{{memberData.building}}-{{memberData.unit}}-{{memberData.account_number}}</li>
        <li> <img src="../../assets/images/house-img.png" alt="">您是{{memberData.type_text}}</li>
        <li>其他成员</li>
      </ul> 
    </div>
    <div class="listSwiper" v-if="memberData.other_member!=0">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(list,index) in memberData.other_member" :key="index" >
          <span @click="remove(list.id)" class="listSwiper-tittle"><img src="../../assets/images/delete.png" alt=""></span>
          <span class="listSwiper-tittle">{{list.name}}</span>
          <span class="listSwiper-tittle">{{list.mobile}}</span>
          <span class="listSwiper-tittle">
            <span style="border-bottom:1px solid #fff;padding:0;margin: 0;">{{list.type_text}}</span> 
          </span>
          <span @click="callShow(list.mobile)" class="listSwiper-tittle"> <img src="../../assets/images/call.png" alt="">拨打电话</span>
          <span v-if="list.checked==0" @click="information(list.id)" class="information">验证成员信息</span>
          <span v-if="list.checked==1" style="background:green;" class="information">已验证信息</span>
        </swiper-slide>
      </swiper>
    </div>
    <div class="list-tips" v-else>
      您暂时不能浏览房屋及成员相关信息
    </div>
    <div class="house-tips">
      <span class="house-tips-text">注意:</span>为了您的信息安全仅业主可浏览和删除房屋其他成员信息,删除后该成员无法浏览房屋相关信息!
    </div>
  </div>
</template>
<script>
import api from '../../api/api.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data(){
    return{
      listData:[],
      Id:'',
      removeData:[],
      memberData:[],
      editmobile: '',
      swiperOption: {
        slidesPerView: 2.38,
        spaceBetween: 30,
        freeMode: true,
      }
    }
  },
  created(){
    this.member()
  },
  methods:{
    goback(){
      this.$router.push('/myHome')
    },
    //房屋成员
    member(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.Id = this.$route.query.id
      this.$get(api.member, {
        params: {
          id: this.Id
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.memberData = response.data.data
          this.$toast.clear();
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
    information(listId){
      this.Id = this.$route.query.id
      this.$get(api.information, {
        params: {
          house_id: this.memberData.house_id,
          household_id: listId
        }
      })
      .then((response) => {
        if(response.data.code===0){
          this.$toast(response.data.msg)
        }else if(response.data.code===1){
          this.$toast(response.data.msg)
          this.member()
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    // 删除成员
    remove(Id){
      this.$get(api.remove, {
        params: {
          id: Id,
          house_id: this.memberData.house_id
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.removeData = response.data.data
          this.member()
        }
      })
      .catch((error) => {
        console.log(error);
      });
      },
      callShow(mobile){
        this.editmobile = mobile
        window.location.href = `tel:${this.editmobile}`
      },
  },
  components: {
    swiper,
    swiperSlide,
  }
}
</script>
<style scoped>
.houseMembers{
  overflow: hidden;
  font-weight: bold;
}
.listContent{
  color: #000;
  margin:1.5rem .5rem 0;
  font-size: .32rem;
}
.listContent .list-Box li:nth-of-type(2){
  margin: .3rem 0;
  font-size: .28rem;
  color: #57c5c6;
  display: block;
}
.listContent .list-Box li:nth-of-type(3){
  display: block;
  margin-bottom: .35rem;
}
.listContent .list-Box li:nth-of-type(3) img{
  vertical-align: sub;
  width: .5rem;
  height: .5rem;
}
.listContent .list-Box li:nth-of-type(4){
  display: block;
}
.listSwiper{
  margin-top: .3rem;
}
.swiper-container{
  padding-left:.5rem;
  width: 100%;
  height: 4rem;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.listSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.swiper-slide{
  /* padding-left: .2rem; */
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  border-radius: 12px;
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.swiper-slide  span{
  margin-left: .2rem;
}
.swiper-slide  span:nth-of-type(1){
  padding-top: .5rem;
  text-align: right;
  margin-right: .2rem;
}
.swiper-slide  span:nth-of-type(1) img{
  width: .3rem;
  height: .4rem;
}
.swiper-slide span:nth-of-type(3){
  margin-top: .2rem;
}
.swiper-slide  span:nth-of-type(4){
  margin-top: .2rem;
}
.swiper-slide  span:nth-of-type(5){
  margin-top: .3rem;
  line-height: .6rem;
}
.swiper-slide img{
  margin-right: .1rem;
  width: .5rem;
  height: .5rem;
  vertical-align: top;
  font-size: .28rem;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #000;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.listSwiper-tittle{
  display: block;
  width: auto;
  color: #000;
  font-size: .28rem;
  word-wrap: break-word;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.house-tips{
  margin: .35rem .5rem 0;
  color: #000;
}
.house-tips-text{
  font-weight: bold;
  display: block;
  margin-bottom: .2rem;
  color: #57c5c6;
}
.list-tips{
  margin: .35rem .5rem 0;
  color: #000;
  font-weight: bold;
}
.information{
  height: .28rem;
  width: 100%;
  line-height: 0.3rem;
  padding: .08rem 0rem;
  color: rgb(255, 255, 255);
  background: red;
  margin: 0!important;
  text-align: center;
  display: block;
  border-radius: 0 0 .2rem .2rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
